<template>
  <div class="playerTeam">
    <el-form inline-message ref="playerTeamForm" :rules="rules" :model="playerTeamForm" label-width="300px"
      label-position="left">
      <el-form-item label="入队时间" prop="joinDate">
        <el-date-picker type="date" placeholder="选择日期" v-model="playerTeamForm.joinDate" style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="离队时间" prop="leftDate">
        <el-date-picker type="date" placeholder="选择日期" v-model="playerTeamForm.leftDate" style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否在校">
        <el-select v-model="playerTeamForm.atSchoolId" filterable clearable style="width: 100%;" placeholder="请选择">
          <el-option :label="item" :value="key" v-for="(item,key,index) in dict_atSchool" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运动员状态">
        <el-select v-model="playerTeamForm.playerStatusId" filterable clearable style="width: 100%;" placeholder="请选择">
          <el-option :label="item" :value="key" v-for="(item,key,index) in dict_playerStatus" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="集中类型">
        <el-select v-model="playerTeamForm.focusTypeId" filterable clearable style="width: 100%;" placeholder="请选择">
          <el-option :label="item" :value="key" v-for="(item,key,index) in dict_focusType" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入队时年级">
        <el-select v-model="playerTeamForm.gradeId" filterable clearable style="width: 100%;" placeholder="请选择">
          <el-option :label="item" :value="key" v-for="(item,key,index) in dict_grade" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推荐学校" prop="recommendationSchool">
        <el-input v-model="playerTeamForm.recommendationSchool"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" size="small" icon="el-icon-s-promotion" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    player_status,
    focus_type
  } from "@/api/dict.js"
  import {
    playerSelect,
    playerMessageUpdate
  } from "@/api/person.js"
  export default {
    props: ['pId'],
    data() {
      return {
        dict_atSchool: {
          1: '在校',
          2: '离校'
        },
        dict_playerStatus: {},
        dict_focusType: {},
        dict_grade: {
          1: "一年级",
          2: "二年级",
          3: "三年级",
          4: "四年级",
          5: "五年级",
          6: "六年级",
          7: "七年级",
          8: "八年级",
          9: "九年级",
          10: "高一",
          11: "高二",
          12: "高三",
          13: "大一",
          14: "大二",
          15: "大三",
          16: "大四",
          17: "研一",
          18: "研二",
          19: "研三",
          20: "幼儿园",
        },
        playerTeamForm: {
          joinDate: '',
          leftDate: '',
          atSchoolId: '',
          playerStatusId: '',
          focusTypeId: '',
          gradeId: '',
          recommendationSchool: '',
        },
        rules: {
          joinDate: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
        },
      }
    },
    computed: {
      openDateValid() {
        if (this.playerTeamForm.joinDate && this.playerTeamForm.leftDate) {
          if (this.playerTeamForm.joinDate > this.playerTeamForm.leftDate) {
            this.$message.error('入队时间必须小于离队时间！')
            return false
          } else {
            return true
          }
        } else {
          return true
        }
      }
    },
    created() {
      this.init_dict()
      this.playerSelect()
    },
    methods: {
      save() {
        this.$refs.playerTeamForm.validate((valid) => {
          if (valid && this.openDateValid) {
            let data = {}
            if (this.playerTeamForm.joinDate) data.joinDate = this.$moment(this.playerTeamForm.joinDate).format(
              'YYYY-MM-DD') + ' 00:00:00'
            if (this.playerTeamForm.leftDate) data.leftDate = this.$moment(this.playerTeamForm.leftDate).format(
              'YYYY-MM-DD') + ' 00:00:00'
            if (this.playerTeamForm.atSchoolId) data.atSchoolId = this.playerTeamForm.atSchoolId
            if (this.playerTeamForm.playerStatusId) data.playerStatusId = this.playerTeamForm.playerStatusId
            if (this.playerTeamForm.focusTypeId) data.focusTypeId = this.playerTeamForm.focusTypeId
            if (this.playerTeamForm.gradeId) data.gradeId = this.playerTeamForm.gradeId
            if (this.playerTeamForm.recommendationSchool) data.recommendationSchool = this.playerTeamForm
              .recommendationSchool

            playerMessageUpdate({
              pId: this.pId,
              data: data
            }).then(res => {
              if (res.code === 200) {
                this.$message.success('保存成功')
                this.insertSuccess = true
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      },
      playerSelect() {
        playerSelect(this.pId).then(res => {
          if (res.code === 200) {
            this.playerTeamForm.joinDate = res.data.joinDate
            this.playerTeamForm.leftDate = res.data.leftDate
            this.playerTeamForm.atSchoolId = res.data.atSchoolId == 0 ? '' : res.data.atSchoolId + ''
            this.playerTeamForm.playerStatusId = res.data.playerStatusId == 0 ? '' : res.data.playerStatusId + ''
            this.playerTeamForm.focusTypeId = res.data.focusTypeId == 0 ? '' : res.data.focusTypeId + ''
            this.playerTeamForm.gradeId = res.data.gradeId == 0 ? '' : res.data.gradeId + ''
            this.playerTeamForm.recommendationSchool = res.data.recommendationSchool
          }
        })
      },
      init_dict() {
        player_status().then(res => {
          this.dict_playerStatus = res
        })
        focus_type().then(res => {
          this.dict_focusType = res
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .playerTeam {
    padding: 50px 200px;

    form {
      border: 1px solid #eeeeee;
      border-radius: 5px;
      padding: 20px;

      &:hover {
        box-shadow: 0 0 5px 2px #eeeeee;
      }
    }
  }
</style>
